<template>
  <div class="app-container">
    <el-form ref="dataForm" :model="dataForm" :rules="rules" label-position="left">
      <el-form-item label="一级菜单" prop="parentMenuId">
        <el-select v-model="queryParams.parentMenuId" placeholder="一级菜单" clearable class="filter-item">
          <el-option
            v-for="item in menus"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="二级菜单" prop="childrenMenuId">
        <el-select v-model="queryParams.childrenMenuId" placeholder="二级菜单" clearable class="filter-item">
          <el-option
            v-for="item in menuChildren"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="dataForm.title" />
      </el-form-item>
      <el-form-item label="URL后缀" prop="urlSuffix">
        <el-input v-model="dataForm.urlSuffix" />
      </el-form-item>
      <!--<el-form-item label="文章内容" prop="content">
        <div id="editor" class="text" style="width: 100%" />
      </el-form-item>-->
      <el-form-item label="状态" prop="display">
        <el-radio-group v-model="queryParams.display">
          <el-radio :label="true">显示</el-radio>
          <el-radio :label="false">隐藏</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取消</el-button>
      <el-button type="primary" @click="save('dataForm')">保存</el-button>
    </div>
  </div>
</template>

<script>
import wangEditor from 'wangeditor'
import { getParent, getChildren, update } from '@/api/helpcenter/article'
export default {
  data() {
    return {
      textMap: {
        create: '新增',
        update: '更新'
      },
      dialogStatus: '',
      dialogFormVisible: false,
      dataForm: {
        id: '',
        parentMenuId: '',
        parentMenuName: '',
        childrenMenuId: '',
        childrenMenuName: '',
        title: '',
        urlSuffix: '',
        articleSort: 0,
        content: 0,
        display: false
      },
      // uploadPath,
      editor: null,
      queryParams: {
        title: '',
        page: 1,
        pageSize: 10
      },
      menus: [],
      menuChildren: [],
      rules: {
        parentMenuId: [
          { required: true, message: '请选择菜单' }
        ],
        title: [
          { required: true, message: '请输入文章标题' }
        ],
        urlSuffix: [
          { required: true, message: '请输入文章地址后缀' }
        ],
        articleSort: [
          { required: true, message: '请输入文章排序' }
        ]
      }
    }
  },
  mounted() {
    this.seteditor()
    this.getMenus()
  },

  methods: {
    getMenus() {
      const other = this
      getParent().then(response => {
        other.menus = response.data
      })
    },
    getChildrenMenus(id) {
      const other = this
      getChildren({ 'id': id }).then(response => {
        other.menuChildren = response.data
      })
    },
    seteditor() {
      // http://192.168.2.125:8080/admin/storage/create
      // eslint-disable-next-line new-cap
      this.editor = new wangEditor('#editor')
      this.editor.customConfig.uploadImgShowBase64 = true // base 64 存储图片
      // this.editor.customConfig.uploadImgServer = 'http://otp.cdinfotech.top/file/upload_images'// 配置服务器端地址
      this.editor.customConfig.uploadImgHeaders = { }// 自定义 header
      this.editor.customConfig.uploadFileName = 'file' // 后端接受上传文件的参数名
      this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2M
      this.editor.customConfig.uploadImgMaxLength = 6 // 限制一次最多上传 3 张图片
      this.editor.customConfig.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间

      // 配置菜单
      this.editor.customConfig.menus = [
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        'link', // 插入链接
        'list', // 列表
        'justify', // 对齐方式
        'quote', // 引用
        'emoticon', // 表情
        'image', // 插入图片
        'table', // 表格
        'video', // 插入视频
        'code', // 插入代码
        'undo', // 撤销
        'redo', // 重复
        'fullscreen' // 全屏
      ]

      this.editor.customConfig.uploadImgHooks = {
        fail: (xhr, editor, result) => {
          // 插入图片失败回调
        },
        success: (xhr, editor, result) => {
          // 图片上传成功回调
        },
        timeout: (xhr, editor) => {
          // 网络超时的回调
        },
        error: (xhr, editor) => {
          // 图片上传错误的回调
        },
        customInsert: (insertImg, result, editor) => {
          // 图片上传成功，插入图片的回调
          // result为上传图片成功的时候返回的数据，这里我打印了一下发现后台返回的是data：[{url:"路径的形式"},...]
          // console.log(result.data[0].url)
          // insertImg()为插入图片的函数
          // 循环插入图片
          // for (let i = 0; i < 1; i++) {
          // console.log(result)
          const url = 'http://otp.cdinfotech.top' + result.url
          insertImg(url)
          // }
        }
      }
      this.editor.customConfig.onchange = (html) => {
        this.info_ = html // 绑定当前逐渐地值
        this.$emit('change', this.info_) // 将内容同步到父组件中
      }
      // 创建富文本编辑器
      this.editor.create()
    },
    getEditor() {
      console.log(this.editor.txt.html())
    },
    save(formName) {
      const other = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          other.dialogFormVisible = false
          update(other.userData).then(() => {
            other.dataForm = {
              id: '',
              parentMenuId: '',
              parentMenuName: '',
              childrenMenuId: '',
              childrenMenuName: '',
              title: '',
              urlSuffix: '',
              articleSort: 0,
              content: 0,
              display: false
            }
            other.dialogFormVisible = false
            other.$message.success('操作成功')
            other.$refs.tableModel.refreshPage()
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
